<template>
<div class="body">
  <div class="btns">
      <el-form inline size="small">
        <el-form-item label="名称" label-width="200px">
              <el-input v-model="param.name"></el-input>
        </el-form-item>
        <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="loadData">搜索</el-button>
        </el-form-item>
              <el-button size="small" type="primary" @click="downloadHandler" style="float:right;margin-right:70px">导出</el-button>
              <el-button size="small" type="primary" @click="toaddHandler" style="float:right;margin-right:10px">新增</el-button>
      </el-form>
  </div>
  <hr>
  <div>
    <!-- <div style="height:200px">
    {{routedata}}
    <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in routedata"
      :key="item.text"
      :label="item.text"
      :value="item.value">
    </el-option>
  </el-select> 
    </div> -->
<el-table
    :data="tableData"
    style="width: 90%;margin-left:5%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="权限描述">
            <span>{{ props.row.description }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="icon" prop="icon" align="center"></el-table-column>
    <el-table-column label="name" prop="name" align="center"></el-table-column>
    <el-table-column label="num" prop="num" align="center"></el-table-column>
    <el-table-column label="route" prop="route" align="left" :filters="routedata" :filter-method="filterHandler"></el-table-column>
     <el-table-column label="hidden" prop="hidden" align="center"></el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <!-- 定制-插槽 -->
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="deleteHandler(scope.row)"><i class="el-icon-delete"></i></el-button>
          <el-button type="text" size="mini" @click="editHandler(scope.row)"><i class="el-icon-edit"></i></el-button>
        </template>
      </el-table-column>
  </el-table>
  </div>
</div>
</template>

<script>
import { get,post,del } from '@/utils/request'
export default {
    data(){
        return{
            param:{},
            tableData:[],
            routedata:[],
        }
    },
    created(){
         this.loadData()
      },
    methods:{
      //route筛选
       filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      //routestatistic遍历table，寻找route的种类
      routestatistic(){
       let contentlist=this.tableData.map((obj)=>{
          return obj.route;
       });
      let M=contentlist.filter((item,index)=>{
          return contentlist.indexOf(item,0) === index;
        });
        //筛选增加value值
        let rdata=[]
        for(let m of M){
          rdata.push({
            text:m,
            value:m
          })
        }
        this.routedata=rdata
     },
     //根据路由查找
      // loadroute(){
      //   let url= 'http://39.106.31.187:8888/basePrivilege/routfind'
      //      get(url,this.routeparam).then((resp)=>{
      //         this.tableData=resp.data;
      //      })
      // },
      //下载
    downloadHandler(){
        window.location.href="http://39.106.31.187:8888/basePrivilege/download?name="+this.param.name
    },
    //跳转页面
      editHandler(row){
        this.$router.push({
          path:"/privilege/privilegecreate",
          query:row,
        })
      },
      deleteHandler(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://39.106.31.187:8888/basePrivilege/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadData();
        });
      });
    },
      toaddHandler(){
          this.$router.push("/privilege/privilegecreate")
      },
       loadData(){
           let url= 'http://39.106.31.187:8888/basePrivilege/query'
           get(url,this.param).then((resp)=>{
              this.tableData=resp.data;
              this.routestatistic();
           })
       }
    }
}
</script>

<style scoped>
.demo-table-expand .el-form-item{
    width: 100%;

}
</style>
